<template>
  <view class="favorites-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-icon" @click="navigateBack">
        <text class="iconfont icon-back">&lt;</text>
      </view>
      <text class="title">我的收藏</text>
    </view>

    <!-- 收藏列表 -->
    <view class="favorite-list">
      <view 
        class="favorite-item" 
        v-for="(item, index) in favorites" 
        :key="index"
        @click="viewFavoriteDetail(item)"
      >
        <!-- 收藏内容 -->
        <view class="favorite-content">
          <!-- 标题和类型标签 -->
          <view class="content-header">
            <text class="title-text">{{item.title}}</text>
            <text class="type-tag" :class="item.type">{{item.typeText}}</text>
          </view>
          
          <!-- 内容预览 -->
          <view class="content-preview">
            <text class="preview-text">{{item.content}}</text>
          </view>

          <!-- 底部信息 -->
          <view class="content-footer">
            <view class="author-info">
              <text class="author-name">{{item.author}}</text>
              <text class="publish-time">{{item.time}}</text>
            </view>
            <view class="interaction-info">
              <text class="view-count" v-if="item.views">{{item.views}} 浏览</text>
              <text class="like-count" v-if="item.likes">{{item.likes}} 赞</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favorites: [
        {
          id: 1,
          type: 'post',
          typeText: '帖子',
          title: '3.15 广州->上海 FAT 320 换班需求',
          content: '由于个人原因需要调换航班，时间灵活，有意者私聊，感谢！',
          author: '张三',
          time: '10:30',
          views: 156,
          likes: 3
        },
        {
          id: 2,
          type: 'order',
          typeText: '订单',
          title: '3.16-18 广州->墨尔本 BAT 787换班',
          content: '计划换至意大利航线，时间可协商，欢迎联系。',
          author: '李四',
          time: '昨天',
          views: 89,
          likes: 5
        },
        {
          id: 3,
          type: 'post',
          typeText: '帖子',
          title: '关于换班流程的重要通知',
          content: '为了更好地服务大家，现对换班申请流程进行优化，主要变更包括...',
          author: '系统管理员',
          time: '昨天',
          views: 1203,
          likes: 42
        }
      ]
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    viewFavoriteDetail(item) {
      uni.navigateTo({
        url: `/pages/profile/favorites/detail/index?id=${item.id}&type=${item.type}`
      })
    }
  }
}
</script>

<style lang="scss">
.favorites-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  position: relative;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  font-size: 36rpx;
  color: #333;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.favorite-list {
  padding: 20rpx;
}

.favorite-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.favorite-content {
  padding: 24rpx;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.title-text {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
  margin-right: 16rpx;
}

.type-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  
  &.post {
    color: #1989fa;
    background-color: #e8f3ff;
  }
  
  &.order {
    color: #07c160;
    background-color: #e8f8ed;
  }
}

.content-preview {
  margin-bottom: 16rpx;
}

.preview-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.content-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.interaction-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.view-count, .like-count {
  font-size: 24rpx;
  color: #999;
}
</style> 